<!--  -->
<template>
  <div class="login_bgm">
    <div class="login_box">
      <br>
      <h1>后台管理系统</h1>
      <!-- 登录表单区 -->
      <el-form ref="loginFormRef"  label-width="80px" :rules="loginForRrules"  :model="loginForm" class="login_form">
        <el-form-item label="手机号" prop="mobile">
          <el-input prefix-icon="iconfont icon-user" v-model="loginForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input prefix-icon="iconfont icon-3702mima" type="password" v-model="loginForm.password"  ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="login_btn"> 
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name:"Login",
  data () {
     var validatorPhone = function (rule, value, callback) {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      // 表单的验证信息
      loginForm:{
        mobile: '15042920670',
        password:'admin'
      },
       loginForRrules: {
           mobile: [
          { required: true,validator: validatorPhone, trigger: 'blur' }
        ],
           password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
          ],
       }
    };
  },
  methods:{
    //点击登录先进行表单预验证
    login(){

      this.$refs.loginFormRef.validate(async  valid =>{
        // console.log(valid);
        if(!valid) return
        const {data:res} = await this.$http.post('/dqxmall/userinfo/login',this.loginForm)
        
          if(res.code !== 0) return this.$message.console.error("登录失败");
          this.$message.success("登录成功");
          // 将登录成功的token保存到客户端的sessionStorage中
          window.sessionStorage.setItem("token",res.token);
          // 通过编程式导航跳转到后台主页，地址是/home
        this.$router.push('/home') 
      });
    }
  }
}

</script>
<style lang='less' scoped>

.login_bgm{
  
  height: 100%;
  width:100%;
  background-image: url('../assets/imags/bgmLogo/.png') ;
  background-repeat: no-repeat;
 background-size:100% 100%;
}
.login_box{
  position: absolute;
  left: 10%;
  top: 10%;
  height: 400px;
  width: 500px;
  border-radius: 5px;
  background-color: rgb(241, 241, 241);
}
.login_form{
  position: absolute;
  top: 70%;
  left: 50%;
  height: 300px;
  width: 400px;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
}
.login_btn{
  display: flex;
  justify-content: flex-end;
}

</style>